<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../JS/jquery.min.js"></script>
    <script type="text/javascript" src="../JS/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../JS/jquery.serializejson.min.js"></script>

</head>
<body>
   <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:53px">
            <a href="#" id="loadAllBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">所有产品</a>
            
            <a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加产品</a>
        	
        	<a href="#" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
        
   	        <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:100%">

        </div>
        
        <div data-options="region:'west',split:true" title="产品分类" style="width:300px;">
            
            <ul id="tt"></ul>

        </div>

        <div data-options="region:'center',title:'Main Title'">
            <table id="dg">
            </table>

            <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:250px;padding:10px">
                    <form id="ff" method="post">
                            <div style="margin-bottom:20px">
                                    <input class="easyui-textbox" name="_id">
                                
                                <input class="easyui-textbox" name="name" style="width:361px" data-options="label:'手机型号:',required:true">
                            </div>
                            <div style="margin-bottom:20px">
                                <input class="easyui-textbox" name="price" style="width:361px" data-options="label:'手机介绍：',multiline:true">
                            </div>
                            
                            <div style="text-align:center;padding:5px 0">
                                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                            </div>
                    </form>
            </div>
            
             
        </div>
    </div>

    <script>
        var cateId=null;

        $('#tt').tree({
            url:"http://10.31.160.59:3000/cate/list/1",
            method:'get',
	        onClick: function(node){
                cateId=node._id;
                $('#dg').datagrid({
                    queryParams: {
                        cateId:cateId
	                },
                }).datagrid('reload');
	        }
        });

        $('#dg').datagrid({
            url:'http://10.31.160.59:3000/product/list',
            method:'post',
            
            queryParams: {
                cateId:cateId
            },
            
            fit:true,
            pagination:true,
            pageSize:10,
            pageList:[10,20],
            columns:[[
                {field:'ck',title:'复选',checkbox:true},
                {field:'name',title:'产品名',width:100,align:'center'},
                {field:'price',title:'介绍',width:300,align:'center'},
                {field:'operate',title:'操作',width:80,align:'center',
                    formatter:function(value,row,index){
                        return "<a onclick=deleteData('"+ row._id+"')>删除</a> <a onclick=editData('"+ row._id+"')>修改</a>"
                    }
                }
                
            ]]
        });

        $("#addBtn").click(function(){
            $('#ff').form('clear'); 
            if(cateId===null){
                $.messager.show({
                title:'信息提示',
                msg:'请选择分类，否则无法添加',
                timeout:3000,
                showType:'show',
            });
            }else{
                $('#dlg').dialog('open')
            }
        })

        function submitForm(){
            var postData=$("#ff").serializeJSON();
            postData.cateId=cateId;

            if(postData._id.length>0){
                delete postData.cateId;
                $.ajax({
                    type:"put",
                    url:"http://10.31.160.59:3000/product/data/"+postData._id,
                    data:postData,
                    async:true,
                }).done(function(res){
                    $.messager.show({
                    title:'信息提示',
                    msg:'数据修改成功',
                    timeout:3000,
                    showType:'show',
                });
                $('#dlg').dialog('close');
                $('#dg').datagrid('reload');
                })
            }else{
                delete postData._id;
                $.ajax({
                    type:"post",
                    url:"http://10.31.160.59:3000/product/data",
                    data:postData,
                    async:true,
                }).done(function(res){
                    $.messager.show({
                    title:'信息提示',
                    msg:'数据添加成功',
                    timeout:3000,
                    showType:'show',
                });
                $('#dlg').dialog('close');
                $('#dg').datagrid('reload');
                })
            }

            delete postData._id;

            
        }
        
        function clearForm(){
            $('#ff').form('clear');
        }

        function deleteData(id){
            $.messager.confirm('确认删除', '？？？？？？？？', function(r){
                if (r){
                    $.ajax({
                        type:"delete",
                        url:"http://10.31.160.59:3000/product/data/"+id,
                        async:true,
                    }).done(function(res){
                        $("#dg").datagrid('reload')
                    })
                }
            });

            
            
        }
        
        function editData(id){
                $.ajax({
                    type:"get",
                    url:"http://10.31.160.59:3000/product/data/"+id,
                    async:true,
                }).done(function(res){
//                  console.log(res)
                    $('#ff').form('load',res);
                    $('#dlg').dialog('open');
                })
                
            }
        
        $("#removesBtn").click(function(){
        	var rows= $("#dg").datagrid('getSelections');
        	
        	if(rows.length>0){
        		var ids=[];
        		rows.forEach(function(item,idx){
	      			ids.push(item._id)
        		});
        		
        		$.ajax({
        			type:"post",
        			url:"http://10.31.160.59:3000/product/data/removes",
        			data:{
        				ids:ids.toString()
        			},
        			async:true
        		}).done(function(res){
        			$("#dg").datagrid("reload")
        		});
			}
        })
        
        $("#loadAllBtn").click(function(){
        	cateId=null;
        	$("#dg").datagrid({
            	queryParams:{
            		cateId:cateId
            	}
            }).datagrid('reload')
        })
        
        
        function doSearch(value){
            $('#dg').datagrid({
                    queryParams: {
                        cateId:cateId,
                        name:value
	                },
                }).datagrid('reload');
		//alert('You input: ' + value);
        }
    </script>
</body>
</html>